<template>
	<view class="page">

		<view class="nav_bar" style="background: #855F27">
			<uni-nav-bar color="#FEDFB3" left-icon="left" title="使用权购买" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="content">
			<scroll-view scroll-y="true">
				<view class="box">
					<view class="grid">
						<view class="item item1 flex_center" @click="chooseConfig(1)" v-if="list.length > 0"
							:id="select_id == 1 ? 'select' : ''">
							<view class="left flex_r_around">
								<view class="flex_c">
									<text>¥{{ list[0].price }}</text>
									<view>/年</view>
								</view>
							</view>

							<view class="right">
								<view class="right-title">应用型功能：</view>
								<view class="right-text">
									短视频，商城（在包含所有超圈的应用型功能：短视频，商城（在线商城/预约到家商城/预约到店商城，员工展示商城），群，直播（视频直播，语音直播，游戏直播，课程直播，预约报名）圈子成员
								</view>
							</view>


							<view class="tags flex_r_around">
								<text>基础版</text>
							</view>
						</view>

						<view class="item item2 flex_center" @click="chooseConfig(2)" v-if="list.length > 1"
							:id="select_id == 2 ? 'select' : ''">
							<view class="left flex_r_around">
								<view class="flex_c">
									<text>¥{{ list[1].price }}</text>
									<view>/年</view>
								</view>
							</view>

							<view class="right">
								<view class="right-title">应用型功能：</view>
								<view class="right-text">
									短视频，商城（在包含所有超圈的应用型功能：短视频，商城（在线商城/预约到家商城/预约到店商城，员工展示商城），群，直播（视频直播，语音直播，游戏直播，课程直播，预约报名）圈子成员
								</view>
								<view class="h24"></view>
								<view class="right-title">营销裂变类工具：</view>
								<view class="right-text">
									1.邀请人送会员<br />
									2.邀请人免费加入特价群/优惠群<br />
									3团购/优惠打折</view>

							</view>


							<view class="tags flex_r_around">
								<text>升级版</text>
							</view>
						</view>

						<view class="item item3 flex_center" @click="chooseConfig(3)"
							:id="select_id == 3 ? 'select' : ''" v-if="list.length > 2">
							<view class="left flex_r_around">
								<view class="flex_c">
									<text>¥{{ list[2].price }}</text>
									<view>永久</view>
								</view>
							</view>

							<view class="right">
								<view class="right-title">应用型功能：</view>
								<view class="right-text">
									短视频，商城（在包含所有超圈的应用型功能：短视频，商城（在线商城/预约到家商城/预约到店商城，员工展示商城），群，直播（视频直播，语音直播，游戏直播，课程直播，预约报名）圈子成员
								</view>
								<view class="h24"></view>
								<view class="right-title">营销裂变类工具：</view>
								<view class="right-text">
									1.邀请人送会员<br />
									2.邀请人免费加入特价群/优惠群<br />
									3团购/优惠打折</view>
								<view class="h24"></view>
								<view class="right-title">流量推广：</view>
								<view class="right-text">
									1.开通广告推广和免费推荐权限<br />
									2.送6999元广告费<br />
									3.自己圈子每增加1人送10元广告费
								</view>

							</view>


							<view class="tags flex_r_around">
								<text>旗舰版</text>
							</view>
						</view>

					</view>

					<view class="btn-box flex_c" v-if="now_level == 1">
						<!-- <view class="btn btn-left flex_r_around" @click="toChat">
							<text>联系客服</text>
						</view> -->
						
						<view class="btn btn-left flex_r_around" @click="toSubmit">
							<text>立即支付</text>
						</view>
						
						<view class="well-buy" @click="hexiao_flag = true">
							我已购买
						</view>
					</view>

				</view>
			</scroll-view>
		</view>

		<u-popup :safeAreaInsetBottom="false" mode="bottom" :show="to_pay_show" @close="to_pay_show = false"
			bgColor="transparent">
			<view class="to_pay_show flex_c">
				<view class="title">支付</view>
				<view class="price">
					<i>￥</i>
					<text>{{ promise_price }}</text>
				</view>
				<view class="pay_type">

					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
						</view>
					</view>

					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>

				</view>

				<view class="btn" @click="readyPay">确认支付</view>

			</view>
		</u-popup>

		<u-popup :show="show_auth" mode="center" @close="show_auth = false" bgColor="transparent">
			<view class="modal2 flex_c">
				<view class="icon flex_center">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_auth = false"></u-icon>
				</view>
				<view class="modal_title">支付成功</view>
				<view class="text">圈子认证后才审核通过</view>
				<view class="modal_btn flex_r_between">
					<view class="item submit flex_r_around" @click="toAuth">
						<text>去认证</text>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="hexiao_flag" mode="center" @close="hexiao_flag = false" bgColor="transparent">
			<view class="modal3 flex_c">
				<view class="icon flex_center">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="hexiao_flag = false"></u-icon>
				</view>
				<view class="modal_title">兑换码</view>
				<view class="text">
					<input type="text" placeholder="请输入兑换码" placeholder-class="input-placeholder" v-model="code" />
				</view>
				<view class="modal_btn flex_r_between">
					<view class="item submit flex_r_around" @click="onSubmitHexiao">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: {
					level: 1,
				},

				circle_id: 0,

				level: 1,

				list: [],

				pay_type: 2,

				to_pay_show: false,

				order_id: 0,

				show_auth: false,

				os: false,

				owner_auth_status: 0,

				promise_price: 999,
				promise_status: 0,

				select_id: 1,

				sale_info: {
					avatar: '',
					nickname: '',
					uid: '',
				},
				
				hexiao_flag: false,
				
				code: '',
				
				now_level: 0,
				
				auth_info: {},
			}
		},
		methods: {

			toSubmit() {
				if (this.promise_status == 1) {
					return this.$util.msg('您已经缴纳过保证金了');
				}

				var up_level = this.select_id == 1 ? 3 : this.select_id == 2 ? 5 : 7;

				this.$post('/circle.circle/submitUpLevel', {
					circle_id: this.circle_id,
					// 9=保证金版
					up_level: up_level,
				}).then(res => {
					this.to_pay_show = true;
					this.owner_auth_status = res.data.owner_auth_status;
					this.order_id = res.data.pay_id;
				});
			},

			readyPay() {
				this.toPay(this.order_id);
			},

			toPay(pay_id) {
				this.$native.orderPay({
					order_id: pay_id,
					pay_type: this.pay_type,
					type: 15
				});
			},

			getPayStatus() {
				this.$post('/pay/get_pay_status', {
					order_id: this.order_id,
					// type 4 推广
					type: 15,
				}, false).then(res => {
					this.getInit();
					this.getStatus();
				});
			},

			paySuccess() {
				this.to_pay_show = false;
				this.getPayStatus();
				// this.$native.upgradeCircleSuccess(`${this.circle_id}`);
				// if (this.owner_auth_status == 0) {
				// 	this.show_auth = true;
				// } else {
				// 	this.$native.backAction();
				// }
			},

			payFail() {
				this.$util.msg('用户取消支付');
				this.to_pay_last = false;
			},

			toAuth() {
				this.$util.toUrl('/pages/auth/authcenter');
			},

			chooseConfig(item) {
				this.select_id = item;
				if(this.select_id == 1){
					this.promise_price = this.list[0].price;
				}
				
				if(this.select_id == 2){
					this.promise_price = this.list[1].price;
				}
				
				if(this.select_id == 3){
					this.promise_price = this.list[2].price;
				}
			},

			getInit() {
				// 升级初始化  @张嘉轩  
				// promise_price 保证金价格
				// promise_status 保证金支付状态：0=未支付，1=已支付
				this.$get('/circle.circle/getUpLevelInfo', {
					circle_id: this.circle_id,
				}).then(res => {
					this.list = res.data.list;
					if(this.list.length){
						this.promise_price = this.list[0].price;
					}
					this.now_level = res.data.now_level;
					this.promise_status = res.data.promise_status;
					this.sale_info = res.data.sale_info;
				})
			},

			toChat() {
				this.$native.toChat({
					nickName: this.sale_info.nickname,
					avatar: this.sale_info.avatar,
					user_id: this.sale_info.uid,
				})
			},

			onSubmitHexiao(){
				var up_level = this.select_id == 1 ? 3 : this.select_id == 2 ? 5 : 7;
				this.$post('/circle.circle/submitUseCode',{
					circle_id: this.circle_id,
					up_level: up_level,
					code: this.code,
				}).then(res=>{
					this.$util.msg(res.msg);
					this.getInit();
					this.getStatus();
					this.hexiao_flag = false;
					this.code = '';
				})
			},
			
			getStatus() {
				this.$post('/user/getProviderInfo').then(res => {
					this.auth_info = res.data || {};
					if(this.auth_info.auth_status != 2){
						this.$util.toUrl(`/pages/auth/authcenter?need_close=1&circle_id=${this.circle_id}`);
					}else {
						this.$native.upgradeCircleSuccess(`${this.circle_id}`);
					}
				});
			},

		},

		onLoad(option) {

			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}


			this.circle_id = option.circle_id || 0;

			window.paySuccess = this.paySuccess;
			window.payFail = this.payFail;
			window.getPayStatusAgain = this.getPayStatus;

			this.getInit();

		}
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		padding: 40rpx 0 0;
		background: linear-gradient(182deg, #855F27 30%, #FDF4E7 100%, rgba(0, 0, 0, 0) 100%);
	}

	.pay_box {
		height: 512rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding-top: 112rpx;

		.price {
			font-weight: 500;
			font-size: 32rpx;
			color: #14151D;
			line-height: 44rpx;
		}

		.money {
			font-size: 96rpx;
			color: #14151D;
			line-height: 88rpx;
			margin: 30rpx 0 80rpx;
		}

		.pay_box_btn {
			width: 528rpx;
			height: 96rpx;
			background: #28292E;
			border-radius: 52rpx;

			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
			}
		}
	}

	.to_pay_show {
		padding: 32rpx 32rpx 64rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.price {
			margin: 34rpx 0 24rpx;

			i {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
				font-style: normal;
			}

			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.pay_type {
			background: #F8F8F8;
			border-radius: 16rpx;
			width: 100%;
			margin: 0 32rpx 64rpx;

			.item {
				height: 100rpx;
				padding: 0 32rpx;

				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}

				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
						margin-right: 30rpx;
					}
				}
			}
		}

		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}

	.modal2 {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 16rpx 44rpx 62rpx;

		.modal_title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FD2A53;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}

		.modal_btn {
			margin-top: 42rpx;

			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;

				text {
					font-size: 28rpx;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}

	.content {
		width: 100vw;
		height: calc(100vh - 44px - var(--paging-head-top) - 40rpx);
		padding: 72rpx 20rpx 0;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		scroll-view {
			height: 100%;
		}

		.box {
			padding-bottom: 30rpx;
		}
	}

	.grid {

		.item1 {
			background: #FFF5E7;
			border: 4rpx solid rgba(255, 206, 138, 1);

			.tags {
				background: linear-gradient(131deg, #DDC59E 0%, #CB8B32 100%);
			}

			.view {
				color: #874F02;
			}

			.price {
				color: #874F02;
			}

			.time {
				color: #874F02;
			}
		}

		.item2 {
			background: #FDF4EC;
			border: 4rpx solid rgba(215, 185, 171, 1);

			.tags {
				background: linear-gradient(153deg, #BB984F 0%, #855F27 100%);
			}

			.view {
				color: #2F1D03;
			}

			.price {
				color: #2F1D03;
			}

			.time {
				color: #2F1D03;
			}
		}

		.item3 {
			background: #FBFCFF;
			border: 4rpx solid rgba(141, 142, 148, 1);

			.tags {
				background: linear-gradient(150deg, #51535B 0%, #28292E 100%);
			}

			.view {
				color: #14151D;
			}

			.price {
				color: #14151D;
			}

			.time {
				color: #14151D;
			}
		}

		.item {
			border-radius: 24rpx;
			position: relative;
			margin-bottom: 24rpx;

			.left {
				width: 202rpx;
				height: 112rpx;
				border-right: 2rpx solid #E3D4BE;
				margin: 108rpx 0;

				text {
					font-weight: 600;
					font-size: 48rpx;
					color: #874F02;
				}

				view {
					font-weight: 600;
					font-size: 32rpx;
					color: #874F02;
					line-height: 40rpx;
					margin-top: 20rpx;
				}
			}

			.right {
				flex: 1;
				padding: 24rpx 22rpx 24rpx 52rpx;

				.right-text {
					font-size: 24rpx;
					color: #874F02;
					line-height: 40rpx;
				}

				.right-title {
					font-weight: 500;
					font-size: 28rpx;
					color: #874F02;
					line-height: 40rpx;
				}
			}

			.tags {
				width: 144rpx;
				height: 48rpx;
				border-radius: 24rpx 0 24rpx 0;
				position: absolute;
				left: -4rpx;
				top: -4rpx;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			.h24 {
				height: 24rpx;
			}

		}

		#select {
			border: 4rpx solid #333;
		}

	}

	.btn-box {

		margin: 36rpx 0 0;

		.btn-left {
			background: #28292E;
		}

		.btn-right {
			background: #CC8F3B;
		}
		
		.well-buy {
			font-size: 24rpx;
			color: #666666;
			line-height: 34rpx;
			text-decoration-line: underline;
			padding: 28rpx 60rpx;
		}

		.btn {
			width: 520rpx;
			height: 96rpx;
			border-radius: 48rpx;

			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
			}
		}
	}

	.modal3 {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 16rpx 44rpx 62rpx;
		
		.modal_title {
			font-weight: 500;
			font-size: 36rpx;
			color: #874F02;
			line-height: 50rpx;
			margin: 16rpx 0 0;
		}
		
		.text {
			width: 440rpx;
			height: 96rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			padding: 0 24rpx;
			margin: 24rpx 0;
			input {
				width: 100%;
				height: 100%;
				font-size: 28rpx;
				color: #333;
				text-align: center;
			}
		}
		
		.modal_btn {
			.item {
				width: 440rpx;
				height: 88rpx;
				background: #28292E;
				border-radius: 44rpx;
		
				text {
					font-size: 28rpx;
					color: #FFF;
				}
			}
		}
		
		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}

</style>